<template>
  <div class="live-preview">
    <div class="section-header">
      <h2>实时预览</h2>
      <div class="preview-actions">
        <el-select v-model="deviceType" placeholder="设备类型" size="small">
          <el-option label="桌面端" value="desktop" />
          <el-option label="平板" value="tablet" />
          <el-option label="手机" value="mobile" />
        </el-select>
        <el-button type="primary" size="small" @click="refreshPreview">
          <el-icon><RefreshRight /></el-icon>
          刷新预览
        </el-button>
      </div>
    </div>

    <div class="preview-container">
      <div class="device-frame" :class="deviceType">
        <div class="device-screen">
          <template v-if="loading">
            <div class="loading-screen">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <span>加载预览...</span>
            </div>
          </template>
          <template v-else-if="previewError">
            <div class="error-screen">
              <el-icon class="error-icon"><CircleClose /></el-icon>
              <h3>预览加载失败</h3>
              <p>{{ previewError }}</p>
              <el-button type="primary" @click="refreshPreview">重试</el-button>
            </div>
          </template>
          <template v-else>
            <div class="preview-content">
              <!-- 渲染设计画布内容的预览 -->
              <div 
                v-for="element in previewElements" 
                :key="element.id"
                :style="getElementStyle(element)"
                class="preview-element"
              >
                <template v-if="element.type === 'text'">
                  {{ element.content }}
                </template>
                <template v-else-if="element.type === 'image'">
                  <el-image :src="element.src || 'https://placeholder.pics/svg/200/DEDEDE/555555/图片'" fit="contain" />
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <div class="interaction-info">
      <el-alert
        title="交互预览"
        type="info"
        description="此预览展示了UI原型的视觉效果。您可以通过点击元素来模拟简单交互。在正式版中，将支持更复杂的交互行为定义和链接。"
        show-icon
        :closable="false"
      />
    </div>

    <div class="preview-panel">
      <h3>预览信息</h3>
      <div class="preview-info">
        <div class="info-item">
          <label>预览模式：</label>
          <span>{{ deviceTypeLabel }}</span>
        </div>
        <div class="info-item">
          <label>元素数量：</label>
          <span>{{ previewElements.length }}</span>
        </div>
        <div class="info-item">
          <label>尺寸：</label>
          <span>{{ deviceDimensions.width }} x {{ deviceDimensions.height }}</span>
        </div>
        <div class="info-item">
          <label>最后更新：</label>
          <span>{{ lastUpdated }}</span>
        </div>
      </div>

      <el-divider />
      
      <h3>页面导航</h3>
      <div class="pages-list">
        <el-empty v-if="pages.length === 0" description="暂无页面" />
        <div v-else>
          <el-radio-group v-model="currentPage" @change="switchPage">
            <el-radio 
              v-for="page in pages" 
              :key="page.id" 
              :label="page.id"
              class="page-item"
            >
              {{ page.name }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { RefreshRight, Loading, CircleClose } from '@element-plus/icons-vue'

// 设备类型
const deviceType = ref('desktop')
const deviceTypeLabel = computed(() => {
  const labels = {
    desktop: '桌面端',
    tablet: '平板',
    mobile: '手机'
  }
  return labels[deviceType.value]
})

// 设备尺寸
const deviceDimensions = computed(() => {
  const dimensions = {
    desktop: { width: '1280px', height: '720px' },
    tablet: { width: '768px', height: '1024px' },
    mobile: { width: '375px', height: '667px' }
  }
  return dimensions[deviceType.value]
})

// 预览状态
const loading = ref(true)
const previewError = ref(null)
const lastUpdated = ref(new Date().toLocaleString())

// 模拟页面数据
const pages = ref([
  { id: 1, name: '首页' },
  { id: 2, name: '登录页' },
  { id: 3, name: '个人中心' }
])
const currentPage = ref(1)

// 模拟元素数据 - 在实际应用中，应该从父组件传入或通过状态管理获取
const previewElements = ref([
  {
    id: 1,
    type: 'rectangle',
    x: 0,
    y: 0,
    width: 1280,
    height: 60,
    backgroundColor: '#ffffff',
    borderColor: '#e0e0e0',
    borderWidth: 0,
    borderBottomWidth: 1,
    borderRadius: 0
  },
  {
    id: 2,
    type: 'text',
    x: 20,
    y: 10,
    width: 200,
    height: 40,
    content: 'MyApp Logo',
    fontFamily: 'Arial, sans-serif',
    fontSize: 20,
    color: '#333333',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0
  },
  {
    id: 3,
    type: 'rectangle',
    x: 200,
    y: 100,
    width: 880,
    height: 200,
    backgroundColor: '#f5f7fa',
    borderColor: '#e0e0e0',
    borderWidth: 1,
    borderRadius: 4
  },
  {
    id: 4,
    type: 'text',
    x: 240,
    y: 120,
    width: 800,
    height: 40,
    content: '欢迎使用我们的应用',
    fontFamily: 'Microsoft YaHei, sans-serif',
    fontSize: 28,
    color: '#303133',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0
  },
  {
    id: 5,
    type: 'text',
    x: 240,
    y: 180,
    width: 800,
    height: 80,
    content: '这是一个示例页面预览，展示了原型设计的实时效果。在实际应用中，此处将显示您在设计画布中创建的UI界面。',
    fontFamily: 'Microsoft YaHei, sans-serif',
    fontSize: 14,
    color: '#606266',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0
  },
  {
    id: 6,
    type: 'rectangle',
    x: 200,
    y: 340,
    width: 280,
    height: 160,
    backgroundColor: '#ffffff',
    borderColor: '#e0e0e0',
    borderWidth: 1,
    borderRadius: 4
  },
  {
    id: 7,
    type: 'text',
    x: 220,
    y: 360,
    width: 240,
    height: 30,
    content: '功能一',
    fontFamily: 'Microsoft YaHei, sans-serif',
    fontSize: 18,
    color: '#303133',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0
  },
  {
    id: 8,
    type: 'rectangle',
    x: 500,
    y: 340,
    width: 280,
    height: 160,
    backgroundColor: '#ffffff',
    borderColor: '#e0e0e0',
    borderWidth: 1,
    borderRadius: 4
  },
  {
    id: 9,
    type: 'text',
    x: 520,
    y: 360,
    width: 240,
    height: 30,
    content: '功能二',
    fontFamily: 'Microsoft YaHei, sans-serif',
    fontSize: 18,
    color: '#303133',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0
  },
  {
    id: 10,
    type: 'rectangle',
    x: 800,
    y: 340,
    width: 280,
    height: 160,
    backgroundColor: '#ffffff',
    borderColor: '#e0e0e0',
    borderWidth: 1,
    borderRadius: 4
  },
  {
    id: 11,
    type: 'text',
    x: 820,
    y: 360,
    width: 240,
    height: 30,
    content: '功能三',
    fontFamily: 'Microsoft YaHei, sans-serif',
    fontSize: 18,
    color: '#303133',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 0
  }
])

// 模拟页面切换数据
const pageData = {
  1: previewElements.value,
  2: [
    {
      id: 101,
      type: 'rectangle',
      x: 400,
      y: 150,
      width: 400,
      height: 350,
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 8
    },
    {
      id: 102,
      type: 'text',
      x: 450,
      y: 180,
      width: 300,
      height: 40,
      content: '用户登录',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 24,
      color: '#303133',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 103,
      type: 'rectangle',
      x: 450,
      y: 240,
      width: 300,
      height: 40,
      backgroundColor: '#f5f7fa',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 4
    },
    {
      id: 104,
      type: 'text',
      x: 450,
      y: 220,
      width: 300,
      height: 20,
      content: '用户名',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 14,
      color: '#606266',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 105,
      type: 'rectangle',
      x: 450,
      y: 310,
      width: 300,
      height: 40,
      backgroundColor: '#f5f7fa',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 4
    },
    {
      id: 106,
      type: 'text',
      x: 450,
      y: 290,
      width: 300,
      height: 20,
      content: '密码',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 14,
      color: '#606266',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 107,
      type: 'rectangle',
      x: 450,
      y: 380,
      width: 300,
      height: 40,
      backgroundColor: '#409EFF',
      borderColor: '#409EFF',
      borderWidth: 0,
      borderRadius: 4
    },
    {
      id: 108,
      type: 'text',
      x: 450,
      y: 380,
      width: 300,
      height: 40,
      content: '登 录',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 14,
      color: '#ffffff',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    }
  ],
  3: [
    {
      id: 201,
      type: 'rectangle',
      x: 0,
      y: 0,
      width: 1280,
      height: 60,
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 0,
      borderBottomWidth: 1,
      borderRadius: 0
    },
    {
      id: 202,
      type: 'text',
      x: 20,
      y: 10,
      width: 200,
      height: 40,
      content: 'MyApp Logo',
      fontFamily: 'Arial, sans-serif',
      fontSize: 20,
      color: '#333333',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 203,
      type: 'rectangle',
      x: 0,
      y: 60,
      width: 200,
      height: 660,
      backgroundColor: '#f5f7fa',
      borderColor: '#e0e0e0',
      borderWidth: 0,
      borderRightWidth: 1,
      borderRadius: 0
    },
    {
      id: 204,
      type: 'text',
      x: 300,
      y: 100,
      width: 300,
      height: 40,
      content: '个人中心',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 24,
      color: '#303133',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0
    },
    {
      id: 205,
      type: 'rectangle',
      x: 300,
      y: 160,
      width: 200,
      height: 200,
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 100
    },
    {
      id: 206,
      type: 'text',
      x: 300,
      y: 380,
      width: 200,
      height: 30,
      content: '用户名',
      fontFamily: 'Microsoft YaHei, sans-serif',
      fontSize: 18,
      color: '#303133',
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 0,
      textAlign: 'center'
    },
    {
      id: 207,
      type: 'rectangle',
      x: 550,
      y: 160,
      width: 600,
      height: 400,
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      borderRadius: 4
    }
  ]
}

// 获取元素样式 - 与设计画布组件中的函数类似
const getElementStyle = (element) => {
  return {
    position: 'absolute',
    left: `${element.x}px`,
    top: `${element.y}px`,
    width: `${element.width}px`,
    height: `${element.height}px`,
    backgroundColor: element.backgroundColor || 'transparent',
    border: element.borderWidth > 0 ? `${element.borderWidth}px solid ${element.borderColor || '#ccc'}` : 'none',
    borderRadius: `${element.borderRadius}px`,
    fontFamily: element.fontFamily || 'Arial, sans-serif',
    fontSize: element.fontSize ? `${element.fontSize}px` : 'inherit',
    color: element.color || '#000',
    display: 'flex',
    alignItems: 'center',
    justifyContent: element.textAlign === 'center' ? 'center' : 'flex-start',
    overflow: 'hidden',
    whiteSpace: element.whiteSpace || 'normal',
    textAlign: element.textAlign || 'left',
    borderBottomWidth: element.borderBottomWidth ? `${element.borderBottomWidth}px` : null,
    borderRightWidth: element.borderRightWidth ? `${element.borderRightWidth}px` : null
  }
}

// 刷新预览
const refreshPreview = () => {
  loading.value = true
  previewError.value = null
  
  // 模拟加载过程
  setTimeout(() => {
    loading.value = false
    lastUpdated.value = new Date().toLocaleString()
    ElMessage.success('预览已刷新')
  }, 800)
}

// 切换页面
const switchPage = (pageId) => {
  loading.value = true
  
  // 模拟页面切换
  setTimeout(() => {
    if (pageData[pageId]) {
      previewElements.value = pageData[pageId]
      loading.value = false
      lastUpdated.value = new Date().toLocaleString()
    } else {
      loading.value = false
      previewError.value = '页面数据加载失败'
    }
  }, 600)
}

// 生命周期
onMounted(() => {
  // 模拟加载
  setTimeout(() => {
    loading.value = false
  }, 1000)
})
</script>

<style scoped>
.live-preview {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 100%;
}

.section-header {
  grid-column: 1 / span 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.preview-actions {
  display: flex;
  gap: 12px;
}

.preview-container {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
  border-radius: 4px;
  overflow: auto;
  padding: 20px;
}

.device-frame {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.device-frame.desktop {
  width: 1280px;
  height: 720px;
  max-width: 100%;
  max-height: 100%;
}

.device-frame.tablet {
  width: 768px;
  height: 1024px;
  max-width: 100%;
  max-height: 100%;
  border: 12px solid #e0e0e0;
  border-radius: 12px;
}

.device-frame.mobile {
  width: 375px;
  height: 667px;
  max-width: 100%;
  max-height: 100%;
  border: 16px solid #1a1a1a;
  border-radius: 24px;
}

.device-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}

.loading-screen, .error-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
}

.loading-icon {
  font-size: 32px;
  margin-bottom: 16px;
  animation: spin 2s linear infinite;
}

.error-icon {
  font-size: 40px;
  margin-bottom: 16px;
  color: #f56c6c;
}

.preview-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.preview-element {
  user-select: none;
  cursor: pointer;
}

.preview-element:hover {
  outline: 1px dashed #409EFF;
}

.interaction-info {
  grid-column: 1;
  grid-row: 3;
}

.preview-panel {
  grid-column: 2;
  grid-row: 2 / span 2;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 16px;
  overflow-y: auto;
}

.preview-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.preview-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-item label {
  width: 100px;
  color: #909399;
}

.info-item span {
  color: #303133;
}

.pages-list {
  display: flex;
  flex-direction: column;
}

.page-item {
  margin-bottom: 8px;
  width: 100%;
  display: block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1200px) {
  .live-preview {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
  }
  
  .section-header {
    grid-column: 1;
  }
  
  .preview-container {
    grid-column: 1;
    grid-row: 2;
  }
  
  .interaction-info {
    grid-column: 1;
    grid-row: 3;
  }
  
  .preview-panel {
    grid-column: 1;
    grid-row: 4;
  }
}
</style> 